<template>
  <div class="page">
    <div class="toolbar">
      <a class="btn-back" @click="$router.back()">
        <i class="iconfont icon-fanhui"></i>
      </a>
    </div>

    <div class="referral-qr">
      <div class="qrcode-img">
        <img :src="info.img" class="img" />
      </div>
    </div>
    <div class="fixed-bottom">
      <div>
        <div class="qrcode-txt">我的{{ $t('邀请码') }}：<span>{{ info.code }}</span></div>
        <div class="btns">
          <button type="button" class="btn" @click="execCommand">{{ $t('复制链接') }}</button>
          <nuxt-link to="referral" class="btn">{{ $t('我的推荐') }}</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { Toast } from 'mint-ui'
import { copyText } from '@/utils/dom'
export default {
  data () {
    return {
      info: {}
    }
  },
  beforeMount () {
    this.getReferralInfo()
      .then((data) => {
        this.info = data.data
      })
  },
  methods: {
    ...mapActions({
      getReferralInfo: 'user/getReferralInfo'
    }),
    execCommand () {
      if (copyText(this.info.url)) {
        Toast(this.$t('复制成功'))
      } else {
        Toast('复制失败')
      }
    }
  }
}
</script>
<style scoped>
.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding: 0 10px;
}
.toolbar .iconfont {
  color: white;
}
.toolbar .title {
  color: white;
}
.page {
  height: 10vh;
  background-color: #1a006d;
  padding-top: 177.78%;
  background-image: url(~@/assets/images/referral-bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: -2px 0;
}
.referral-qr {
  /* position: fixed;
  top: 344px;
  width: 100%; */
  margin-top: -94%;
}
.qrcode-img {
  width: 30%;
  background-color: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.qrcode-img .img {
  width: 100%;display: block;
}
.qrcode-txt {
  background-color: #d42007;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #ffffff;
}
.qrcode-txt span {
  color: #ffffff;
  font-weight: 500;
}
.btns {
  padding: 4px 0 0;
  display: flex;
  justify-content: space-between;
}
.btn {
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  background: #d49507;
  width: 49.5%;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1a006d;
}
</style>
